<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>

<body>
    <div id="app" @click="eventClick('111')">
        <template v-for="item in list">
            <children :prop-data="item" :key="item"></children>
        </template>
    </div>
</body>

<script id="children" type="text/html">
    <p>
         组件children {{ propData  }} 
    </p>
</script>
<script id="children1" type="text/html">
    <p>
       组件children11 
    </p>
</script>
<script>






    const vue = new Vue({
        el: '#app',
        data() {
            return {
                tab: 'children',
                compoent: 'children',
                age: 15,
                list: [1,2,3,4,5,6]
            }
        },
        methods: {
            randomilize(arr) {
                var length = arr.length;
                var arr1 = new Array();
                for (var i = 0; i < length; i++) {
                    arr1[i] = i;
                }   //建立数组下标数组
                var arr2 = new Array();
                for (var i = 0; i < length; i++) {
                    arr2[i] = arr1.splice(Math.floor(Math.random() * arr1.length), 1);
                }  //将数组下标随机打乱
                var arr3 = new Array();
                for (var i = 0; i < length; i++) {
                    arr3[i] = arr[arr2[i]];
                }  //将数组按打乱后的下标输出
                return arr3;
            },
            eventClick() {
                let list = this.randomilize(this.list)
                console.log(list);
                this.list = list

           
            }
        },
        components: {
            children: {
                props: ['propData'],
                watch: {
                    'propData':function(val){
                        console.log(val,'prop');
                    }
                },
                template: document.getElementById('children').innerHTML
            },
            children1: {
                mounted() {
                    console.log('初始化2')
                },
                template: document.getElementById('children1').innerHTML
            }
        }
    })

    console.log(vue);



</script>
<script>
</script>

</html>